<template>
  <div>
    <div class="head">
      <span>共{{ this.periods.length }}课时</span>
      <van-progress :percentage="0" color="#f2826a" />
      <span>已学习0%</span>
    </div>
    <ul>
      <li v-for="(item, index) in periods" :key="index">
        <p>
          <span style="color: orange"> ·[回放]</span>
          <span>{{ item.periods_title }}</span>
        </p>
        <p v-for="(e, i) in item.teachers" :key="i">
          <span>{{ e.teacher_name }}</span>
          <span>{{ item.start_play }}</span>
          <span> - </span>
          <span>{{ item.end_play }}</span>
        </p>
        <br />
        <p style="display: flex; justify-content: space-around">
          <van-progress
            :percentage="0"
            pivot-text=""
            color="#f2826a"
            style="width: 150px"
          />
          已观看0%
        </p>
      </li>
    </ul>
    <br /><br />
    <div class="bottom">
      <el-button type="primary" @click="course">
        {{ !is_comment ? "写评论" : "查看评论" }}
      </el-button>
      <el-button type="success" @click="$router.push(`details?item=${$route.query.item}`)">课程详情</el-button>
      <el-button type="info" @click="del">移出列表</el-button>
    </div>

    <van-popup v-model="popupShow">
      <div class="box">
        <!-- 星级 -->
        <div>
          星级：
          <van-rate v-model="rateValue" :readonly="is_comment" />
        </div>
        <!-- 评论 -->
        <div class="pinl">
          评论：<textarea v-model="content" :readonly="is_comment"></textarea>
        </div>
        <!-- 发布 -->
        <button @click="submit" v-show="!is_comment">发布</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getCourse, submitComment,delComment } from "@/utils/api/index";
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
      //   是否评论
      is_comment: false,
      //   显示弹出层
      popupShow: false,
      //   星级
      rateValue: 3,
      // 评论的消息
      content: "",
      //   评论页面数据
      commentInfo: [],
      // 课时数据
      periods: [],
    };
  },
  methods: {
    course() {
      if (this.is_comment) {
        console.log("查看评论");
        this.rateValue = this.commentInfo.comment_grade;
        this.content = this.commentInfo.comment_content;
      } else {
        console.log("写评论");
      }
      this.popupShow = true;
    },
    // 提交数据
    submit() {
      let data = {
        content: this.content,
        course_id: this.$route.query.id,
        grade: 3,
        type: 1,
      };
      submitComment(data).then((res) => {
        // console.log(res)
        if (res.code == 200) {
          this.$toast(res.msg);
          window.location.reload();
        }
      });
    },
    del(){
        delComment(this.$route.query.id).then(res => {
            console.log(res)
            this.$toast(res.msg)
        })
    }
  },
  computed: {},
  filters: {},
  components: {},
  directives: {},
  mounted() {
    getCourse(this.$route.query.id).then((res) => {
      this.commentInfo = res.data.course;
      this.periods = res.data.periods || [];
      console.log(this.commentInfo, this.periods);
      this.is_comment = res.data.course.is_comment == 0 ? false : true;
    });
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.24rem;
}
.box {
  width: 300px;
  height: 300px;
  background: white;
}
textarea {
  width: 200px;
  display: inline-block;
  height: 100px;
  background: pink;
  border-radius: 80%;
  text-align: center;
  padding-top: 10%;
}
.head {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid gray;
  align-items: center;
  height: 30px;
  .van-progress {
    width: 150px;
  }
}
ul {
  list-style: none;
  li{
      padding: 20px;
      box-sizing: border-box;
      border: 1px solid gray;
      margin: 10px 10px;
  }
}
.bottom{
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}
</style>